<template>
	<div class="addProject add">
		<div class="addForm zll-form">
			<el-form :model="addForm" :rules="rules" ref="addForm">
				<el-form-item class="formList" prop="topicName" label="主题：">
					<el-input clearable class="input_right" placeholder="请输入主题" v-model="addForm.topicName"></el-input>
				</el-form-item>
				<el-form-item class="formList" prop="topicData" label="数据：">
					<el-input clearable class="input_right" placeholder="请输入数据" v-model="addForm.topicData"></el-input>
				</el-form-item>
				<el-form-item class="formList" prop="topicUnit" label="单位：">
					<el-input clearable class="input_right" placeholder="请输入单位" v-model="addForm.topicUnit"></el-input>
				</el-form-item>
				<el-form-item class="formList safe" prop="" label="图标：">
					<img-upload class="active_up"  ref="safeRef" limit="1" :imgList="logoImages" type="data-icon" :checkSize="true" :isImgSave="true" :hidden="true"></img-upload>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
	import {getStore} from "../../../../../plugins/localStore";
	// import imgUpload from './imgUpload'
	import imgUpload from '../../../../system/visual-img/imgUpload.vue';
	export default {
		props:['editData'],
		components:{imgUpload},
		data() {
			return {
				addForm: {
					id: '',
					topicName: '',
					topicData: '',
					topicUnit: '',
					pageType: 'table',
					pageAttr: 'data_center',
					index: '1',
					fileBlob: '',
				},

				logoImages:[],
				rules: {
					topicName: [
						{required: true, message: "请输入主题", trigger: "blur"}
					],
					topicData: [
						{required: true, message: "请输入数据", trigger: "blur"}
					],
					topicUnit: [
						{required: true, message: "请输入单位", trigger: "blur"}
					]
				},
				count: 0
			};
		},
		methods: {

			submitForm() {
				let self = this;
				this.$refs["addForm"].validate((valid) => {
					if (valid) {
						self.operate();
					} else {
						return false;
					}
				});
			},

			operate() {
				let self = this;
				let url = self.addForm.id ? '/jinl/front/updateFrontDisplay' : '/jinl/front/addFrontDisplay';
				let param = {
					id: self.addForm.id,
					pageKey: self.addForm.topicName,
					pageContent: self.addForm.topicData,
					pageType: self.addForm.pageType,
					pageAttr: self.addForm.pageAttr,
					extendValue1: getStore().userName,
					extendValue2: self.addForm.index||'1',
					extendValue3: self.addForm.topicUnit,
					extendValue4: '',
				};
				let images = self.$refs.safeRef.getImages();
				if(images.length == 0 || !images[0].id){
					self.$message.warning('请上传图标');
					return;
				}
				param.extendValue4  = images[0].id;
				if (this.count == 0) {
					self.count++;
					self.$http({
						url: url,
						method: "post",
						params: param
					}).then(resp => {
						if (resp.success) {
							self.$message.success('操作成功');
							self.$emit('refreshData');
							return
						}
						self.$message.error(resp.message);
						self.count--;
					});
				}
			},
		},

		watch: {
			editData(val) {
				this.logoImages = [];
				console.log(val)
				if(Object.getOwnPropertyNames(val).length > 1){
					this.addForm.id = val.id;
					this.addForm.topicName = val.pageKey;
					this.addForm.topicData = val.pageContent;
					this.addForm.topicUnit = val.extendValue3;
					this.addForm.index = val.extendValue2||'';
					let file = {fileBlob:val.fileBlob||'',id:val.fileId,fileName:'icon'};
					if(file.id){
						this.logoImages.push(file)
					}
					console.log(val,'============');
				}
			}
		},
	};
</script>
<style>
.safe .imgItem{
	width: 220px !important;
	height: 100px !important;
}
</style>
<style lang="scss" scoped>
	@import "@/style/dialog.scss";
</style>
